import "./index.scss"
import logo from "@/assets/logo.png"
import bg from "@/assets/bg.jpg"
import lgbg from "@/assets/lgbg.jpg"

import { Button, Form, Input, message } from 'antd';
import { UserOutlined,LockOutlined  } from '@ant-design/icons';

import { useState } from "react";
import {loginApi} from "@/api/users";
import { useNavigate } from "react-router-dom";
import { setToken } from "@/store/login/authSlice";
import { useDispatch } from "react-redux";
const Login=()=>{
    const [form] = Form.useForm();
    const [loading,setLoading]=useState<boolean>(false)

    // const navigate=useNavigate()
    const dispatch = useDispatch()
    const navigate=useNavigate()

    // 封装登录处理逻辑
    const handleLoginProcess = async (values: any) => {
        setLoading(true)
        try {
            // 登录获取token
            const {data:{token}} = await loginApi(values)
            message.success("登录成功")
            dispatch(setToken(token))
            localStorage.setItem("username",values.username)           
            navigate("/",{replace:true})

        } catch (error) {
            console.error("登录异常:", error)
            message.error("登录过程中发生错误")
        } finally {
            setLoading(false)
        }
    }

    function handleLogin(){ 
        form.validateFields().then(handleLoginProcess)
        .catch(error=>{
            setLoading(false)
            console.log("表单验证错误:", error)
            message.error("请检查输入信息")
        })
    }


    return (
        <div className="login" style={{ backgroundImage: `url(${bg})` }}>
        <div className="lgbg" style={{ backgroundImage: `url(${lgbg})` }}>
            <div className="part">
                <div className="title">
                    <div className="logo">
                        <img src={logo} width={100} />
                    </div>
                    <h1>朋远智慧园区管理平台</h1>
                </div>
                <Form
                    name="basic"
                    form={form}
                >
                    <Form.Item
                        name="username"
                        rules={[
                            { required: true, message: '用户名不能为空' },
                            { pattern:/^\w{3,8}$/,message:"用户名必须是3-8位数字字母组合"},
                        ]}
                    >
                        <Input placeholder="请输入用户名" prefix={<UserOutlined />} />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        rules={[{ required: true, message: '密码不能为空' }]}
                    >
                        <Input.Password placeholder="请输入密码" prefix={<LockOutlined  />} />
                    </Form.Item>
                    <Form.Item wrapperCol={{ span: 24 }}>
                        <Button type="primary" htmlType="submit" style={{width:"100%"}} onClick={handleLogin} loading={loading}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    </div>
    )
}

export default Login;